<!DOCTYPE html>
<html>
<body>


<script type="text/javascript">
     gettables(1);

    var colorArray = ['#ff35b9','#f51534','#f69534','#009800','#3655f4','#4592FF','#ffee0f','#00ffef','#ff8c00','#e53611','#ffffff'];

    function initCaptionHover(){
        $('.demo').captionHover({
            fx: 'sophie'
        });
    }


    /*实现锚点功能  点击之后跳转到虚拟身份关系图*/
    function moveToMain(index,account,virtualidentity){
        addBeChoose(index);
        showRealation(account,virtualidentity);
        setLayuiData(account);
        //$("html").animate({scrollTop: 250},300);
    }

    /*任务栏被选中*/
    function addBeChoose(index){
        $(".content-inner-task").removeClass("taskBeChoose");
        $(".content-inner-task:eq("+index+")").addClass("taskBeChoose");
    }

    function gettables(num) {
        var flag = num == null?1:num;
        $.ajax({
            type: "POST",
            url: "/virtual/getTableShow/"+flag,
            data: "",
            async: false,
            dataType: 'json',
            success: function(data) {
                $(".prev_button").remove();
                $(".next_button").remove();
                if(data.list.length>0){
                    var str=gethtml(data.list);

                    $(".content-inner").html(str);
                    setTaskListHtml(data);
                    initCaptionHover();

                    showRealation(data.list[0].account,data.list[0].virtualidentity);
                    setLayuiData(data.list[0].account);
                    addBeChoose(0);

                }else {

                }


            }
        });


    }


    function gethtml(result) {
        var str ="";
        for (var i=0;i<result.length;i++){
            str += "<div class=\"content-inner-task\" onclick=\"moveToMain("+i+","+result[i].account+","+result[i].virtualidentity+")\" style=\"background-image: url(../img/index/about-bg.jpg);\">" +
                    "<figure class=\"demo\" style=\"width:100%\">" +
                    "<figcaption style=\"height:210px;\">" +
                    "<div class=\"task-body\">"+
                    "<h5 style=\"font: 16px;margin-top:20px;\">" +
                    "  <div class='task-body-title'>"+
                    "   <span class='task-body-title-span'><@spring.message 'virtualidentity.phone' />：</span>"+
                    "  </div>"+
                    "  <div class='task-body-info'>"+
                    "   <span class='task-body-info-span'>"+result[i].account+"</span>"+
                    "  </div><br>"+

                    "  <div class='task-body-title'>"+
                    "   <span class='task-body-title-span'><@spring.message 'virtualidentity.virtual' />：</span>"+
                    "  </div>"+
                    "  <div class='task-body-info'>"+
                    "   <span class='task-body-info-span'>"+result[i].virtualidentity+"</span>"+
                    "  </div><br>"+

                    "  <div class='task-body-title'>"+
                    "   <span class='task-body-title-span'><@spring.message 'virtualidentity.virtual.type' />：</span>"+
                    "  </div>"+
                    "  <div class='task-body-info'>"+
                    "   <span class='task-body-info-span'>"+result[i].name+"</span>"+
                    "  </div><br>"+

                    "  <div class='task-body-title'>"+
                    "   <span class='task-body-title-span'><@spring.message 'virtualidentity.time' />：</span>"+
                    "  </div>"+
                    "  <div class='task-body-info'>"+
                    "   <span class='task-body-info-span'>"+result[i].time+"</span>"+
                    "  </div>"+

                    "</h5>" +
                    "</div>" +
                    "<p class=\"description\"><@spring.message 'virtualidentity.relation.pic' /></p>" +
                    "</figcaption>" +
                    "</figure>" +
                    "</div>";

        }
        if(result.length < 7){
            for (var j =0;j<7-result.length;j++){
                str += "<div class=\"content-inner-task\" style=\"background-image: url(../img/index/about-bg.jpg);\">" +"</div>";
            }
        }
        return str;
    }


    function showRealation(info,type){
        openCover();


        var myChart1 = document.getElementById('main');
        var myChart = echarts.init(myChart1);

        $.get("/virtual/"+info+"/"+type).done(function(data){
            console.log(data);

            var nodes=[];
            var edges=[];
            var legon=[];
            var catoty=[];
            var arraynode = data.nodes;
            var arrayedges = data.edges;
            var arraydetails = data.ddd;

            for (var i = 0;i<arraydetails.length;i++){
                legon.push({name:arraydetails[i].name,
                    textStyle:{
                        fontSize:15,
                        fontWeight:'bolder',
                        color:'#cccccc'
                    }});
                catoty.push({
                    name: arraydetails[i].name,
                    itemStyle: {
                        normal: {
                            color: colorArray[i%10]
                        }
                    }
                })
            }
            for (var i = 0; i < arraynode.length; i++) {
                var id = arraynode[i].virtualtype ==null?arraynode[i].account:arraynode[i].virtualidentity+arraynode[i].virtualtype;
                var name = arraynode[i].virtualtype ==null?arraynode[i].account:arraynode[i].virtualidentity;

                nodes.push({id:id,name:arraynode[i].name+'：'+name,
                    category: arraynode[i].virtualtype ==null?'account':arraynode[i].name,
                    symbol: arraynode[i].virtualtype ==null?'image://picture/sim.png':'image://picture/'+arraynode[i].picturepath,
                    draggable: true,
                    // draggable: true,
                    itemStyle: {
                        normal: {
                            label: {
                                position: 'bottom'
                            }
                        }
                    }});
            }

            for (var i = 0; i < arrayedges.length; i++){
                edges.push({'source': arrayedges[i].form,
                    'target': arrayedges[i].to,
                    'value': '',
                    'virtualIdentity':arrayedges[i].virtualidentity,
                    'virtualtype':arrayedges[i].virtualtype})
            }




            myChart.setOption({
                backgroundColor: '#000000',
                tooltip: {
                    show: false
                },
                legend: {
                    x: "cnetet",
                    show:true,
                    data: legon
                },
                animation: true,
                series: [{
                    type: 'graph',
                    layout: 'force',
                    zoom: 0.6,
                    symbol: "circle",
                    symbolSize: 50,
                    roam: true, //禁止用鼠标滚轮缩小放大效果
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [0, 15],
                    // 连接线上的文字
                    focusNodeAdjacency: true, //划过只显示对应关系
                    edgeLabel: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 50
                            },
                            formatter: "{c}"
                        }
                    },
                    categories: catoty,
                    lineStyle: {
                        normal: {
                            opacity: 1,
                            width: 5,
                            curveness: 0
                        }
                    },
                    // 圆圈内的文字
                    label: {
                        normal: {
                            show: true
                        }
                    },
                    force: {
                        repulsion: 3000
                    },
                    data: nodes,
                    links: edges
                }]
            });
            closeCover();
        },false);

        myChart.on('click', function (params) {
            if (params.componentType === 'markPoint') {
                // 点击到了 markPoint 上
                if (params.seriesIndex === 5) {
                    // 点击到了 index 为 5 的 series 的 markPoint 上。
                }
            }
            else if (params.componentType === 'series') {
                if (params.seriesType === 'graph') {
                    if (params.dataType === 'edge') {
                        // 点击到了 graph 的 edge（边）上。
                        $.get("/virtual/getDetailInfo/"+params.data.source+"/"+params.data.virtualIdentity+"/"+params.data.virtualtype,function (data) {
                            var str = "";
                            str = "<center style='font-size: 15px; text-align: left'><b><@spring.message 'virtualidentity.phone' />："+data.account+"<h6 class=\"page-header\"></h6>" +
                                    "<@spring.message 'virtualidentity.virtual' />："+data.virtualidentity+"<h5 class=\"page-header\"></h5>" +
                                    "<@spring.message 'virtualidentity.virtual.type' />："+recaveType(params.data.virtualtype)+"<h6 class=\"page-header\"></h6>" +
                                    "<@spring.message 'virtualidentity.relation.count' />："+data.total+"<h6 class=\"page-header\"></h6>" +
                                    "<@spring.message 'virtualidentity.early.time' />："+data.start_Time+"<h6 class=\"page-header\"></h6>" +
                                    "<@spring.message 'virtualidentity.last.time' />："+data.end_Time+"</b></center>"
                            $("#modal-body-content").html(str);
                            $("#myModal").modal();
                        })
                    }
                    else {
                        // 点击到了 graph 的 node（节点）上。
                        //alert(params.data.name);
                        //alert(params.data.category);
                        // $.get("/virtual/getDetail/lijia",function (data) {
                        //
                        // })
                    }
                }
            }

        });

    }


    /*构建前台界面*/
    function setTaskListHtml(allData){
        var prePage = allData.prePage;
        var nextPage = allData.nextPage;
        var hasPreviousPage = allData.hasPreviousPage;
        var hasNextPage = allData.hasNextPage;
        if (hasPreviousPage) {
            $(".content-inner").append("<div class='prev_button' onclick='gettables("+prePage+");'></div>");
        }

        if (hasNextPage) {
            $(".content-inner").append("<div class='next_button' onclick='gettables("+nextPage+");'></div>");
        }
    }


    function getLocalTime(nS) {
        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
    }

    function unix_to_datetime(unix) {
        var now = new Date(parseInt(unix) * 1000);
        return now.toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    }

    function recaveType(type) {
        switch (type){
            case "1":
                return "IMEI";
                break;
            case "2":
                return "IMSI";
                break;
            case "3":
                return "MAC";
                break;
            case "4":
                return "QQ";
                break;
            case "5":
                return "wechat";
                break;
            case "6":
                return "weibo";
                break;
            default:
                return"IMEI";
        }
    }

    function setLayuiData(account){
        layui.use('table', function(){
            var table = layui.table;
            table.render({
                elem: '#result'
                ,url:'/virtual/queryResult/' + account
                ,cellMinWidth: 60 //全局定义常规单元格的最小宽度
                ,limit:20
                ,page: {limit:20}
                ,height: 865
                ,cols: [[
                    {title: '<@spring.message 'virtualidentity.phone' />', field:'account', width:150, sort: true},
                    {title: '<@spring.message 'virtualidentity.virtual' />', field:'virtual_Id', width:160, sort: true},
                    {title: '<@spring.message 'virtualidentity.virtual.type' />', field:'virtual_Name', width:100, sort: true},
                    {title: '<@spring.message 'virtualidentity.time' />', field:'access_Time', width:185, sort: true}
                ]]
                ,page: true
            });
        });
    }

    /*打开地图遮罩层*/
    function openCover(){
        $(".import-cover").removeClass("import-hide");
    }

    /*关闭地图遮罩层*/
    function closeCover(){
        $(".import-cover").addClass("import-hide");
    }

</script>

</body>
</html>

